<template>
    <div class="check-game-com" v-loading="loading">
        <el-select v-model="gameType" placeholder="请选择" style="width:120px;">
            <el-option
            v-for="item in gameTypeList"
            :key="item.category"
            :label="item.name"
            :value="item.category">
            </el-option>
        </el-select>
        <el-select v-model="sortType" placeholder="请选择" style="width:120px;margin-left:20px;">
            <el-option
            v-for="item in sortTypeList"
            :key="item.typeid"
            :label="item.name"
            :value="item.typeid">
            </el-option>
        </el-select>
        <el-input
            v-model.number="limit"
            placeholder="请输入查询条数"
            @keyup.enter.native="findGame"
            clearable
            style="width:150px;margin-left:20px;">
        </el-input>
        <el-input
            v-model.trim="keyword"
            @keyup.enter.native="findGame"
            clearable
            placeholder="请输入查询关键字"
            style="width: 180px;margin-left:20px;">
        </el-input>
        <el-button type="primary" @click="findGame" style="margin-left:20px;">查询</el-button>

        <div class="desc-box">注：若有相同游戏，根据游戏来源判断，优先级 <b>客户</b> > <b>taptap</b> > <b>应用宝</b></div>

        <el-table
            class="table-box"
            ref="multipleTable"
            :data="tableData"
            @select-all="selectAll"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="500"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                :selectable="canSelect"
                width="55">
            </el-table-column>
            <!-- <el-table-column
                label="日期"
                width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column> -->
            <el-table-column
                prop="gameid"
                label="id">
            </el-table-column>
            <el-table-column
                prop="appIcon"
                label="游戏icon">
                <template slot-scope="scope">
                    <div class="img-box">
                        <img :src="scope.row.appIcon" alt="">
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="appName"
                label="游戏名称">
            </el-table-column>
            <el-table-column
                prop="appScore"
                label="游戏评分">
            </el-table-column>
            <el-table-column
                prop="appTitle"
                label="游戏副标题">
            </el-table-column>
            <el-table-column
                prop="appCategoryName"
                label="游戏类型">
            </el-table-column>
            <el-table-column
                prop="source"
                label="游戏来源">
                <template slot-scope="scope">
                    <span v-if="scope.row.source === 0">taptap</span>
                    <span v-else-if="scope.row.source === 1">应用宝</span>
                    <span v-else-if="scope.row.source === 2">客户</span>
                    <span v-else-if="scope.row.source === 3">学习识别</span>
                    <span v-else-if="scope.row.source === 4">人工</span>
                    <span v-else-if="scope.row.source === 5">小米</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <!-- <el-table-column
                label="游戏状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 1" style="color: #67C23A;">已上架</div>
                        <div v-else class="color:#909399;">已下架</div>
                    </template>
            </el-table-column> -->
        </el-table>
        <div class="btn-box">
            <el-button @click="close">取消</el-button>
            <el-button @click="check" type="primary" class="check-btn">选中{{checkList.length}}条</el-button>
        </div>
    </div>
</template>

<script>
// /**
//  * @check [arr] 返回选中数组
//  * @close 关闭当前页面
//  */
export default {
    name: 'checkGame',
    data () {
        return {
            tableData: [],
            gameType: 0,
            gameTypeList: [],
            sortType: 0,
            sortTypeList: [],
            checkList: [],
            limit: 30,
            keyword: '',
            loading: false,
            disabledId: []
        }
    },
    computed: {
        checkidList () {
            let idList = []
            this.checkList.forEach((item) => {
                idList.push(item.gameid)
            })
            return idList
        }
    },
    props: ['type', 'disabledList'],
    watch: {
        // 传过来的禁止列表 转换为禁止id列表
        disabledList (val) {
            this.disabledId = []
            val.forEach((item) => {
                this.disabledId.push(item.gameid)
            })
        }
    },
    created () {
        this.getAllData()
        this.disabledList.forEach((item) => {
            this.disabledId.push(item.gameid)
        })
    },
    methods: {
        // 获取游戏类别 游戏等 数据
        async getAllData () {
            this.loading = true
            let params = {
                limit: this.limit
            }
            if (this.gameType) {
                params.category = this.gameType
            }
            if (this.sortType) {
                params.rankType = this.sortType
            }
            let res = await this.$http.all([this.$http.post('/home/findGameCategories'), this.$http.post('/home/findGameSortTypes'), this.$http.post('/home/findGames', params)])
            res[0].data.unshift({
                category: 0,
                name: '全部'
            })
            this.gameTypeList = res[0].data
            res[1].data.unshift({
                name: '全部',
                typeid: 0
            })
            this.sortTypeList = res[1].data
            this.tableData = res[2].data
            this.loading = false
        },

        // 查找游戏
        async findGame () {
            if (this.loading) return
            this.loading = true
            let params = {
                limit: this.limit
            }
            if (this.keyword) {
                params.keyword = this.keyword
            }
            if (this.gameType) {
                params.category = this.gameType
            }
            if (this.sortType) {
                params.rankType = this.sortType
            }
            let res = await this.$http.post('/home/findGames', params)
            if (res.code === '0') {
                this.tableData = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc || '系统繁忙，请稍后再试'
                })
            }
            this.loading = false
        },

        // 关闭弹窗
        close () {
            this.$emit('close')
        },

        // 是否可以选中
        canSelect (row) {
            if (this.disabledId.includes(row.gameid)) {
                return false
            }
            if (this.type === 'one' && this.checkList.length >= 1 && !this.checkidList.includes(row.gameid)) {
                return false
            }
            return true
        },

        // 选中切换事件
        handleSelectionChange (val) {
            this.checkList = val
        },

        // 选中
        check () {
            if (this.checkList.length) {
                this.$emit('updateGame', this.checkList)
            }
            this.$refs.multipleTable.clearSelection()
            this.$emit('close')
        },

        // 全选事件
        selectAll () {
            if (this.type === 'one') {
                this.$refs.multipleTable.clearSelection()
            }
        }
    }
}
</script>

<style lang="scss">
    .check-game-com {
        .desc-box {
            color: coral;
            margin: 10px 0;
            padding-left: 10px;
        }
        .table-box {
            // margin-top: 20px;
            .img-box {
                width: 60px;
                height: 60px;
                > img {
                    height: 100%;
                    width: 100%
                }
            }
        }
        .btn-box {
            padding-right: 20px;
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            .check-btn {
                margin-left: 50px;
            }
        }
    }
</style>
